<template>
    <div style="display: block">
        <el-row>
            <el-col :span="10">
                <el-form ref="formInline" :model="formInline"  style="float: left">
                    <el-form-item prop="user" style="float: left">
                        <el-input type="text" v-model="formInline.user" placeholder="书名" style="float: left">书名</el-input>
                    </el-form-item>
                    <el-form-item style="float: left">
                        <el-button @click="getBooks" type="primary" style="float: left;margin-left: 10px; ">查询</el-button>
                        <el-button @click="drawer = true;reset()" type="primary" style="float: left;margin-left: 10px; ">新建</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-table
                :data="memos"
                border
                style="width: 100%;text-aligin:center">
            <el-table-column
                    prop="id"
                    label="id"
                    width="120" >
            </el-table-column>
            <el-table-column
                    prop="book_name"
                    label="书名"
                    width="120" >
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120" >
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="类别"
                    width="120" >
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="添加或者购入时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="简介"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope)"  size="small">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope)" size="small">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="articleCount"
                    @current-change="handleChangePage"
            >
            </el-pagination>
        </div>
        <el-drawer
                title="新增书籍"
                :visible.sync="drawer"
                :with-header="true"
                :before-close="handleCloseDraw" >
            <div  style="background: #cac6c6;height: 100%">
                <el-row style="margin-top: 2px;">
                    <el-col :span="5" style="text-align:center;    display:table;">
                        <p style="color: black;font-size: 15px;">书名:</p>
                    </el-col>
                    <el-col :span="15" style="margin-top: 15px;">
                        <el-input placeholder="书名" v-model="book_name"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 2px;">
                    <el-col :span="5" style="text-align:center;display:table;">
                        <p style="color: black;font-size: 15px;">作者:</p>
                    </el-col>
                    <el-col :span="15" style="margin-top: 15px;">
                        <el-input placeholder="作者" v-model="author"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 2px;">
                    <el-col :span="5" style="text-align:center;display:table;">
                        <p style="color: black;font-size: 15px;">标签:</p>
                    </el-col>
                    <el-col :span="15" style="margin-top: 15px;">
                        <el-input placeholder="类别" v-model="tag"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 2px;">
                    <el-col :span="5" style="text-align:center;display:table;">
                        <p style="color: black;font-size: 15px;">简介:</p>
                    </el-col>
                    <el-col :span="50" style="margin-top: 15px;">
                        <el-input
                                type="textarea"
                                :rows="10"
                                placeholder="请输入内容"
                                style="margin-left: 15px;margin-top: -10px;"
                                v-model="content">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="margin-top: 20px">
                        <el-button @click="addOrUpdateMemo">{{btnSave}}</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import axios from '@/api/ajax.js'
    import utils from '@/util/times.js'

    import  Table from 'element-ui/lib/table';
    import  TableColumn from 'element-ui/lib/table-column';
    import Vue from "vue/dist/vue.js";
    import Pagination from 'element-ui/lib/pagination';
    import Message from 'element-ui/lib/message'
    import Drawer from 'element-ui/lib/drawer'
    import MessageBox from 'element-ui/lib/message-box'
    Vue.use(Drawer);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);



    export default {
        name: "tes",
        data:()=>{
            return{
                editid:-1,
                memos:[],
                btnSave:"保存",
                drawer: false,
                content: "",
                limit:10,
                offset :0,
                formInline: {
                    dockname: '',
                    type: ''
                },
                memoCount:0,
                isupdate:false,
                preview:false,
                subfield:true,
                editable:true,

                title:"",
                brief:"",
                author:"",
                book_name:"",
                tag:"",
                create_time:"",
                timer: "",//定义一个定时器的变量
            }
        },
        methods: {
          reset(){
            this.author = ""
            this.content = ""
            this.book_name = ""
            this.tag = ""
          },
          NowDate(fmt)
            { //author: meizz
              var aData = new Date();
              var o = {
                "M+" : aData.getMonth()+1,                 //月份
                "d+" : aData.getDate(),                    //日
                "h+" : aData.getHours(),                   //小时
                "m+" : aData.getMinutes(),                 //分
                "s+" : aData.getSeconds(),                 //秒
                "q+" : Math.floor((aData.getMonth()+3)/3), //季度
                "S"  : aData.getMilliseconds()             //毫秒
              };
              if(/(y+)/.test(fmt))
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
              for(var k in o)
                if(new RegExp("("+ k +")").test(fmt))
                  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
              return fmt;
            },
            addOrUpdateMemo(){
                console.log(this.isupdate);
                if(this.isupdate === false){
                    console.log(this.isupdate);
                    axios.put('/book',{
                        "book_name":this.book_name,
                        "author":this.author,
                        "title": this.title,
                        "content":this.content,
                        "create_time": utils.getDateFormat(),
                      "tag":this.tag,
                    }).then(response=> {
                            if (response.data.Status === 0)
                            {
                              this.book_name = "";
                              this.author = "";
                              this.getBooks();
                              this.title = "";
                              this.content = "";
                              this.create_time = "";
                              this.tag = "";
                              this.drawer = false;
                            }
                        }
                    ).catch(reason => {
                        Message.error("网络错误:" + reason);
                    });
                }else{
                    axios.post('/book',{
                        "id": this.editid,
                        "book_name":this.book_name,
                        "author":this.author,
                        "tag":this.tag,
                        "content":this.content,
                        "title":this.title,
                        "create_time": utils.getDateFormat(),
                    }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            Message.success("更新成功")
                            this.drawer = false
                            this.getBooks()
                        }
                    })
                }
                this.title = "";
                this.content = "";
                this.editid = -1;
            },
            handlerShow(done) {
                Message.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleChangePage(page){
                this.memos = [];
                axios.post('/memos?limit=' + this.limit + '&offset='  + (page-1)*this.limit,{
                }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            let j = 0;
                            for(let len= response.data.Data.length; j < len; j++) {
                                this.memos.push(response.data.Data[j]);
                            }
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleEdit(row){
                console.log(row.row.id);
                this.author = row.row.author;
                this.book_name = row.row.book_name;
                this.content = row.row.content;
                this.drawer = true;
                this.isupdate = true;
                this.editid = row.row.id;
            },
            handleCloseDraw(done) {
                MessageBox.confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
                this.title = "";
                this.content = "";
                this.editid = -1;
            },
            handleDelete(row){
                console.log(row.row.id);
                axios.post('/delbook',{
                    "id":row.row.id
                }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            this.getBooks()
                            Message.success("删除成功")
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
                //this.$router.push("/BarIView/editor?id=" + row.row.id);
            },
            getBooks(){
                axios.post('/getbooks?limit=' + this.limit + '&offset='  + this.offset ,{
                    "book_name":this.title,
                }).then(response=> {
                        this.memos = [];
                        if (response.data.Status === 0)
                        {
                            let j = 0;
                            for(let len= response.data.Data.length; j < len; j++) {
                                this.memos.push(response.data.Data[j]);
                            }
                            if(this.docType != 110)
                                this.articleCount = response.data.Data.length;
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            },
            getArticleCount(){
                axios.get('/bookcount',{
                }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            this.articleCountAll =response.data.data
                            this.articleCount = this.articleCountAll;
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            },
        },
        created(){
            this.getBooks();
        },
        mounted() {
            this.getArticleCount();
        },
        beforeCreate() {

        },
        beforeDestroy() {
          if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
          }
        }
    }
</script>
<style scoped>
    .el-button--primary:focus, .el-button--primary:hover{
        background: lightblue;
    }
    .container {
        width: 100%;
    }
    .md-text {
        font-size: 12px;
        width: 100%;
    }
    .md-body {
        width: 100%;
        margin-left: 20px;
    }
    .md-text1 {
        font-size: 15px;
        margin-top: 10px;
    }
    .mavonEditor {
        width: 100%;
        height: 800px;
    }
</style>
